/*
 * @Author: mingming.shan
 * @Effect: 问题按钮组件
 * @Date: 2018-06-25 15:53:55
 * @Last Modified by: mingming.shan
 * @Last Modified time: 2018-06-26 14:03:55
 */
<template>
  <div class="problem-type-list-wrapper flex-h flex-vc flex-vw">
    <div
      class="problem-type-btn flex-h flex-hc flex-vc"
      v-for="(item, index) in btnlist"
      :style="{'margin-right':(index<btnlist.length - 1) && (index+1)%3>0?'0.32rem':'0'}"
      :class="item.selected? ['problem-type-btn-active', 'baseBgColorWithActive']:['problem-type-btn-unactive']"
      :key="item.id"
      @click="selectedBtn(item)"
    >
      <!-- :class="item.selected? ['problem-type-btn-active', 'textColorWithActive', 'baseBgColorWithActive']:['correctionTextColorNoActive', 'correctionBgColorNoActive']" -->
      {{item.name}}
    </div>
  </div>
</template>
<style>
/* 列表包裹层 */
.problem-type-list-wrapper {
  height: 192px;
}
/* 类型按钮样式 */
.problem-type-btn {
  box-sizing: border-box;
  border-radius: 4px;
  margin-top: 32px;
  width: 212px;
  height: 64px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
  font-size: 14px; /*no*/
  line-height: 20px; /*no*/
  /* background-color: #f2f5f6; */
  /* color: #333333; */
}
.problem-type-btn-unactive {
  background-color: #f6f6f6;
  color: #333333;
}
/* 按钮激活样式 */
.problem-type-btn-active {
  /* background-color: #1b7ecb; */
  color: #ffffff;
}
</style>
<script>
export default {
  props: {
    btnlist: {
      type: Array,
      required: true
    },
    selectedId: {
      type: String,
      required: true
    }
  },
  methods: {
    // 选择按钮事件
    selectedBtn(item) {
      for (let i of this.btnlist) {
        if (i.selected) {
          i.selected = false
        }
        if (i.id === item.id) {
          i.selected = true
        }
      }
      this.$emit('update:selectedId', item.id)
    }
  }
}
</script>
